<template>
  <view class="container">
    <view class="blue_bg" style="height: 0rpx"/>
    <view class="table_til">
      <view :class="{ 'active': type === 0 }" @click="onActive(0)">
        进行中
      </view>
      <view :class="{ 'active': type === 1 }" @click="onActive(1)">
        已完成
      </view>
    </view>
    <view class="table_search">
      <view class="left">
        <view class="cao">维修方式:</view>
        <uni-data-select v-model="wxfs_value" :localdata="range1" @change="change" :clear="false"
                         width="200rpx"></uni-data-select>
      </view>
      <view class="right">
        <view class="example-body box">
          <text @click="toggle">预约日期</text>
        </view>
        <view>
          <!-- 日期选择弹窗 -->
          <uni-popup ref="popup" background-color="#fff">
            <view class="popup-content">
              <uni-section :title="'日期时间范围用法：\n' + '[' + datetimerange + ']' " type="line"></uni-section>
              <view class="example-body">
                <uni-datetime-picker v-model="datetimerange" @change="changeTime(datetimerange)" type="datetimerange"
                                     rangeSeparator="至"/>
              </view>


            </view>
          </uni-popup>
        </view>
      </view>
    </view>
    <view class="table_body">
      <view v-for="(item,index) in maintain" :key="index" class="table_item">
        <view class="row">
          维修单号:
          <text>{{ item.number }}</text>
        </view>
        <view class="row">
          维修方式:
          <text>{{ weiXiuMethod[item.type] }}</text>
        </view>
        <view class="row">
          预约日期:
          <text> {{ item.subscribeTime }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>

export default {
  data() {
    return {
      datetimerange: [],
      wxfs_value: 0,
      maintain: [],
      maintainState: '',
      beginSubscribeTime: '',
      endSubscribeTime: '',
      type: '',
      weiXiuMethod: ['到店维修', '上门取车'],
      timeDate: [],
      range1: [{
        value: 0,
        text: "全部服务"
      }, {
        value: 1,
        text: "到店维修"
      },
        {
          value: 2,
          text: "上门取车"
        },
      ]
    }
  },
  onLoad() {
    this.type = 0;
    this.getMaintain();
  },
  methods: {
    changeTime(e) {
      this.timeDate = e;
      this.beginSubscribeTime = e[0];
      this.endSubscribeTime = e[1];
      console.log(this.beginSubscribeTime, this.endSubscribeTime);
      this.getMaintain();
      this.closeToggle();
      console.log(this.maintain)
    }
    ,
    getMaintain() {
      const that = this;
      this.$http({
        url: `/api/maintain/maintain/cheMaintainList`,
        method: 'GET',
        data: {
          userId: uni.getStorageSync('user_id'),
          maintainState: that.maintainState,
          type: that.type,
          beginSubscribeTime: that.beginSubscribeTime,
          endSubscribeTime: that.endSubscribeTime,
          // timeDate: JSON.stringify(this.timeDate),
        },
        success(res) {
          // console.log(res.data.data)
          that.maintain = res.data.data;
          // console.log(res.data.data[0].subscribeTime);
        }
      })
    }
    ,
    onActive(e) {
      // this.active = e;
      console.log(e)
      this.type = e;
      this.getMaintain();
    }
    ,
    change(e) {
      if (e === 0) {
        this.maintainState = '';
      } else {
        this.maintainState = e;
      }
      this.getMaintain();
    }
    ,
    toggle() {
      this.$refs.popup.open()
    }
    ,
    closeToggle() {
      this.$refs.popup.close()
    }
  }
}
</script>

<style>
@import '@/static/images/ryx/all.css';

.table_til {
  width: 100vw;
  padding-top: 20rpx;
  color: #fff;
  background-color: #2679f5;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-evenly;
}

.active {
  border-bottom: #fff solid 2px;
}

.table_search {
  width: 80vw;
  margin-top: 20rpx;
  padding: 20rpx;
  border-radius: 20rpx;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
}

.table_search .left {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}

.table_search .left .cao {
  margin-right: 10rpx;
}

.popup-content {
  width: 90vw;
  background-color: #fff;
  margin-top: -35vh;
}

.all_date {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-evenly;
  align-items: center;
}

//.all_date view {
//  margin: 40rpx;
//}

.all_date .date_time {
  padding: 10rpx 40rpx;
  background-color: #f2f2f2;
  border-radius: 50rpx;
}

.table_item {
  width: 80vw;
  margin-top: 20rpx;
  padding: 20rpx;
  border-radius: 20rpx;
  background-color: #fff;
}

.table_item view {
  margin: 20rpx;
}

.table_item text {
  margin-left: 30rpx;
  color: #808080;
}
</style>